<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-03 15:34:46
 * @FilePath: /src/views/service/application/components/ApplicationMineSubscribe.vue
 * @LastEditTime: 2021-07-16 18:23:40
 * @LastEditors: luojiajun
-->
<template>
    <el-row class="application-mine-create">
        <el-col>
            <div class="tree-title">
                <span>我的订阅</span>
                <el-button  class="m20" type="primary" size="mini" :disabled="!multipleSelection.length" @click="onCancelSubscribe(multipleSelection)">取消订阅</el-button>
            </div>
            <el-table
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                :row-key="getRowKeys"
                @selection-change="handleSelectionChange"
                border
            >
                <el-table-column type="selection" reserve-selection width="55"></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="服务中文名称" prop="apiName" show-overflow-tooltip></el-table-column>
                <el-table-column label="服务英文名称" prop="apiNameEn" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.apiNameEn || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="版本号" prop="apiVersion" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ scope.row.apiVersionOut || scope.row.apiVersion || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="所属组" prop="groupName" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ scope.row.groupName || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="调用路径" prop="requestPath" show-overflow-tooltip></el-table-column>
                <el-table-column label="接口状态" prop="apiStatus" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ $enum.TABLE_APPROVE_STATUS_MAP[scope.row.apiStatus] || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="更新人" prop="updateBy" show-overflow-tooltip></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip></el-table-column>
                <el-table-column label="更新内容" prop="infoUpdateContent" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.infoUpdateContent || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="创建人" prop="createBy" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip></el-table-column>
                <el-table-column label="备注" prop="remark" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.remark || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="订阅状态" prop="subscribeStatus" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ $enum.TABLE_APPROVE_STATUS_MAP[scope.row.subscribeStatus] || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 申请中、已通过可以取消 -->
                        <el-button v-if="[1, 2].includes(Number(scope.row.subscribeStatus))" @click="onCancelSubscribe([scope.row])" size="mini">{{ scope.row.subscribeStatus == 2 ? '撤销' : '取消订阅'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination>
        </el-col>
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import { getInterfaceList, subscribeCancelInterface } from "@/api/dataService/application";

export default {
    name: "applicationMineSubscribe",
    props: {
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                viewType: 3
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined,
            multipleSelection: [],
        };
    },
    computed: {
        mergerRuleForm() {
            return Object.assign({}, this.ruleForm, this.form)
        }
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true) - 240;
    },
    methods: {
        fetchData() {
            let parmas = {
                pageNum: this.mergerRuleForm.pageNum,
                pageSize: this.mergerRuleForm.pageSize,
            }
            getInterfaceList(this.mergerRuleForm, parmas)
                .then(res => {
                    if (res.code == 200) {
                        let tableList = res.data.records
                        for (let i = 0; i < tableList.length; i++) {
                            const item = tableList[i];
                            delete item.id
                        }
                        this.tableList = tableList;
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getRowKeys(row) {
            return row.id;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        onCancelSubscribe(rows) {
            if (!rows.length) {
                this.$message({
                    message: '请选择要取消的订阅记录',
                    type: 'warning'
                });
                return
            }

            let subscribeIds = rows.map(item => item.subscribeId).join(',')

            subscribeCancelInterface({ subscribeIds }).then(res => {
                if (res.code == 200) {
                    this.msgSuccess("操作成功");
                    this.fetchData()
                }
            }).catch(() => {
                this.msgError("操作失败");
            })
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.tree-title {
    height: 30px;
    line-height: 30px;
}
</style>
